<template>
  <section class="friendItem" @click="showIcon">
    <i class="defaultIcon" :class="active == index?'activeIcon':''" ></i>
    <div class="friendFace" :style="{background:'url('+ faceUrl + ') no-repeat center center', backgroundSize:'cover'}"></div>
    <div class="friendName">
      <slot>好友姓名</slot>
    </div>
  </section>
</template>
<script>
export default {
  props: {
    faceUrl: {
      default: ''
    },
    active: {

    },
    index:{

    }
  },
  data () {
    return {
      
    }
  },
  created() {
    
  },
  methods:{
    showIcon () {
      this.$emit("showicon")
    },
  },
}
</script>
<style lang="less" scoped>
.friendItem {
  width: 3.45rem;
  height: .6rem;
  display: flex;
  align-items: center;
  margin: 0 auto;
  background: white;
  font-weight: 500;
  &:nth-last-child(1) {
    .friendName {
      border-bottom: none;
    }
  }
  .friendName {
    width: 2.55rem;
    height: .59rem;
    line-height: .59rem;
    border-bottom: .01rem solid #E1E1E1;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    
  }
  .defaultIcon {
    display: block;
    width: .2rem;
    height: .2rem;
    background: url('../../assets/img/expert/icon_unsekected@3x.png') center center;
    background-size: cover;
    margin-right: .15rem;
    background-repeat: no-repeat!important;
  }
  .activeIcon {
    background: url('../../assets/img/expert/icon_yes@3x.png') center center!important;
    background-repeat: no-repeat;
    background-size: cover!important;
    background-repeat: no-repeat!important;
  }
  .friendFace {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    margin-right: .1rem;
    background: url('../../assets/img/my@3x.png') center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

</style>

